<template>
  <div class="mdh">页面说明</div>
  <div class="desc">
    <ol>
      <li v-for="text in desList" :key="text">
        <div>{{ text }}</div>
      </li>
    </ol>
  </div>
  <div class="mdh">页面效果</div>
  <oList
    :headerOptions="headerOptions"
    :searchOptions="searchOptions"
    :tableOptions="tableOptions"
  />
  <div class="mdh">代码展示</div>
  <CodeView :code="code" />
</template>
<script lang="ts" setup>
import { oList } from 'oneui'
import { AddUserDialog } from '~/popup/user'
// const res = await $fetch('/api/hello')
// console.log(res)
// const res2 = await useFetch('/api/hello1')
// console.log(res2)
const desList = [
  '列表页面分为三个区：顶部按钮区、搜索区、表格区',
  '顶部按钮区通常包含：标题配置和按钮',
  '搜索区通常包含：输入框、下拉框、日期等组件，以及搜索、重置、导出等按钮',
  '表格区通常包含：列中可以是各种组件，包含赋值，跳转，点击显示弹窗，日期格式化，数字格式化，列合并，列排序，汇总，表头合并等',
  '目前表单组件有20种: button、cascader、checkbox、colorpicker、datepicker、download、image、input、link、radio、select、slider、switch、tag、text、tree、upload',
  '组件切换非常简单，只需要修改comtype参数就可以，传上述组件名直接显示不同组件',
  '组件更内置大文件上传，大文件下载等特色组件，另外可注册项目自定义组件到组件库统一使用',
  '优点：1、三个区的组件配置通用，oneui组件内部统一汇聚到表单组件上，也就是任何区都可以使用各种组件，2、配置简单化达到代码规范，样式统一目的'
]
const code = `
import { oList } from "oneui";
// 组件
<oList
  headerOptions={headerOptions}
  searchOptions={searchOptions}
  tableOptions={tableOptions}
/>
// 头部按钮区
const headerOptions = computed(() => {
    return {
      title: "用户列表",
      columns: [
        {
          comtype: "button",
          label: "添加用户",
          onClick() {
            // 弹窗
            AddUserDialog();
          },
        }
      ],
    };
});
// 搜索区
const searchOptions = computed(() => {
  return {
    columns: [
      {
        prop: "username",
        comtype: "input",
        placeholder: "请输入用户账号",
      },
      {
        prop: "status",
        placeholder: "请输入在线状态",
        comtype: "select",
        options: [
          { label: "PC在线", value: 1 },
          { label: "WAP在线", value: 2 },
          { label: "APP在线", value: 3 },
        ],
      },
    ],
  };
});
// 表格区
const tableOptions = computed(() => {
  return {
    columns: [
      {
        width: 70,
        fixed: "left",
        type: "selection",
        label: "全选",
      },
      {
          width: 150,
          prop: 'login',
          label: '账号',
          align: 'center',
          type: 'primary',
          sortable: true,
          copy: true
      },
    ],
    pageApiPromise: userListPromise,
  };
});
`
const headerOptions = computed(() => {
  return {
    title: '用户列表',
    columns: [
      {
        comtype: 'button',
        label: '添加用户',
        onClick() {
          // 弹窗
          AddUserDialog()
        }
      }
    ]
  }
})
// 搜索区
const searchOptions = computed(() => {
  return {
    columns: [
      {
        prop: 'username',
        comtype: 'input',
        placeholder: '请输入用户账号'
      },
      {
        prop: 'status',
        placeholder: '请输入在线状态',
        comtype: 'select',
        options: [
          { label: 'PC在线', value: 1 },
          { label: 'WAP在线', value: 2 },
          { label: 'APP在线', value: 3 }
        ]
      }
    ]
  }
})
// 表格区
const tableOptions = computed(() => {
  return {
    columns: [
      {
        width: 70,
        fixed: 'left',
        type: 'selection',
        label: '全选'
      },
      {
        width: 150,
        prop: 'login',
        label: '账号',
        align: 'center',
        type: 'primary',
        sortable: true,
        copy: true
      }
    ],
    pageApiPromise: function () {
      return new Promise(resolve => {
        resolve({
          total: 1000,
          items: [{ login: '张三' }, { login: '李四' }]
        })
      })
    }
  }
}) as any
</script>
